<template>
	<view class="content">
		<Header></Header>
		<view class="home-tabs">
			<u-tabs :list="topBar" 
			@change="changeTabs" 
			:current='current'
			:activeStyle="{
				color: '#333333',
				fontWeight: 'bold',
				fontSize: '29rpx'
			}"
			:inactiveStyle="{
				color: '#AAAAAA'
			}"
			></u-tabs>
		</view>
		<view class="home-swiper">
			<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"> -->
			<swiper :duration="1000" :current="current" @change="changeSwiper" :style="'height:'+swiperHeight+'px;'">
				<swiper-item v-for="(item,index) in topBar" :key="index">
					<!-- <view class="swiper-item">{{index}}</view> -->
					<scroll-view scroll-y="true" :style="'height:'+swiperHeight+'px;'" @scrolltolower="lower">
						<!-- <keep-alive> -->
							<component :is="activeCom" v-if="index==current" :courseList="courseList"></component>
						<!-- </keep-alive> -->
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
<!-- 		<u-button type="primary" text="确定"></u-button>
		<u-button>123</u-button>
		<u-button placeholder="月落"></u-button> -->
	</view>
</template>	

<script>
	import Header from '@/components/common/Header.vue'
	import Free from '@/components/home/free.vue'
	import ActualCombat from '@/components/home/actualCombat.vue'
	import Recommend from '@/components/home/recommend.vue'
	import {searchCourse} from '@/api/course.js'
	import {mixin} from '@/mixins/mixin.js'
	export default {
		components: {
			Header,
			Free,
			ActualCombat,
			Recommend
		},
		mixins: [mixin],
		data() {
			return {
				swiperHeight: 1000,
				current: 0,
				topBar: [{
					name: '今日推荐',
				}, {
					name: '免费课程',
				}, {
					name: '实战课程'
				}],
				activeCom: Recommend,
				courseList: [],
				courseParam: {
					pageNum:1,
					pageSize:3,
					entity:{
						sortBy:"clicks-desc"
					},
				}
			}
		},
		onReady() {
			// let searchHeight = 0
			// let tabsHeight = 0
			// //header-search高度
			// let searchView = uni.createSelectorQuery().select('.header-search')
			// searchView.boundingClientRect(data=>{
			// 	searchHeight = data.height
			// }).exec()
			// //home-tabs高度
			// let tabsView = uni.createSelectorQuery().select('.home-tabs')
			// tabsView.boundingClientRect(data=>{
			// 	tabsHeight = data.height
			// }).exec()
			
			// let that = this
			// uni.getSystemInfo({
			// 	success(res) {
			// 		that.swiperHeight = res.windowHeight - searchHeight - tabsHeight
			// 	}
			// })
			
			this.swiperHeight = this.getHeigh('.header-search','.home-tabs')
		},
		onLoad() {
			this.getCourse(this.courseParam)
		},
		methods: {
			changeTabs({index}){
				// console.log(index)
				this.current = index
				this.tabsCom(index)
			},
			changeSwiper(e){
				// console.log(e)
				this.current = e.detail.current
				this.tabsCom(e.detail.current)
			},
			// 判断动态组件显示
			tabsCom(index){
				switch(index){
					case 0:
						this.activeCom = Recommend
					break
					case 1:
						this.activeCom = Free
					break
					case 2:
						this.activeCom = ActualCombat
					break
					
				}
			},
			getCourse(param){
				searchCourse(param).then(res=>{
          console.log(res)
					// this.courseList = res.pageInfo.list
					this.courseList = [...this.courseList,...res.pageInfo.list]
				})
			},
			//滚动到底部
			lower(){
				this.courseParam.pageNum++
				this.getCourse(this.courseParam)
			}
		}
	}
</script>

<style>
.home-tabs{
	
}

/deep/ .u-tabs__wrapper__nav__item__text{
	font-size: 29rpx;
	font-weight: 400;
}

/deep/ ::-webkit-scrollbar{
	display: block;
	width: 0px !important;
	height: 0px !important;
}

/* .home-swiper{
	padding: 29rpx;
} */
</style>
